<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath }"/>

<div class="page-header">
    <h1>
        <c:if test="${empty appUserEntity}">
            注册用户
        </c:if>
        <c:if test="${!empty appUserEntity}">
            编辑用户
        </c:if>
    </h1>
</div>
<div class="row" style="margin-top:5px;">
    <div class="col-xs-12">
        <form id="appUserForm" name="appUserForm" class="form-horizontal" role="form" method="post">
            <c:if test="${!empty appUserEntity}">
                <input type="hidden" id="pageNum" name="pageNum" value="${page.pageNum }">
                <input type="hidden" id="pageSize" name="pageSize" value="${page.pageSize }">
                <input type="hidden" id="orderByColumn" name="orderByColumn" value="${page.orderByColumn }">
                <input type="hidden" id="orderByType" name="orderByType" value="${page.orderByType }">
                <input type="hidden" name="id" id="appUserId" value="${appUserEntity.id }">
            </c:if>
            <div class="form-group">
                <label class="control-label col-sm-1 no-padding-right" for="uAccountName">用户账号</label>
                <div class="col-sm-10">
                    <div class="clearfix">
                        <input class="form-control" name="uAccountName" id="uAccountName" type="text"
                               value="${appUserEntity.uAccountName }" placeholder="用户名称..."/>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-1 no-padding-right" for="uPassword">用户密码</label>
                <div class="col-sm-10">
                    <div class="clearfix">
                        <input class="form-control" name="uPassword" id="uPassword" type="password"
                               value="${appUserEntity.uPassword }" placeholder="用户密码..."/>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-1 no-padding-right" for="uName">用户昵称</label>
                <div class="col-sm-10">
                    <div class="clearfix">
                        <input class="form-control" name="uName" id="uName" type="text"
                               value="${appUserEntity.uName }" placeholder="用户昵称..."/>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-1 no-padding-right" for="uSex">性别</label>
                <div class="col-sm-10">
                    <div class="radio" id="uSex">
                        <label>
                            <input name="uSex" type="radio" class="ace input-lg" value="1"
                                   <c:if test="${appUserEntity.uSex eq 1}">checked</c:if>>
                            <span class="lbl bigger-110">男</span>
                        </label>
                        <label>
                            <input name="uSex" type="radio" class="ace input-lg" value="0"
                                   <c:if test="${appUserEntity.uSex eq 0}">checked</c:if>>
                            <span class="lbl bigger-110">女</span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-1 no-padding-right" for="birthday">出生日期</label>
                <div class="col-sm-10">
                    <div class="clearfix">
                        <input class="form-control date-picker" name="uBirthday" id="birthday" type="text"
                               value="<fmt:formatDate value="${appUserEntity.uBirthday }" pattern="yyyy-MM-dd"/>"
                               placeholder="出生日期..."/>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-1 no-padding-right" for="multipartFile" >头像</label>
                <div class="col-sm-3">
                    <div class="clearfix">
                        <c:if test="${appUserEntity.uIcon != null}">
                            <a href="${appUserEntity.uIcon}" id="cboxElement" data-rel="colorbox" class="cboxElement">
                                <img width="160" height="130" alt="150x150" src="${appUserEntity.uIcon}">
                            </a>
                        </c:if>
                        <input multiple="" type="file" name="multipartFile" id="multipartFile"/>
                        <input type="hidden" value="" name="uIcon" id="imageUrl">
                    </div>
                </div>
            </div>
        </form>
        <div class="hr hr-dotted"></div>
    </div>
</div>
<div class="center">
    <button id="btnAdd" type="button" class="btn btn-success btn-sm">
        <i class="fa fa-user-plus"></i>&nbsp;
        <c:if test="${empty appUserEntity}">
            添加
        </c:if>
        <c:if test="${!empty appUserEntity}">
            保存
        </c:if>
    </button>
    <button id="btnBack" type="button" class="btn btn-info btn-sm">
        <i class="fa fa-undo"></i>&nbsp;返回
    </button>
</div>
<script src="${ctx}/resources/ace/assets/js/src/elements.fileinput.js"></script>
<script src="${ctx}/resources/ace/assets/js/src/elements.typeahead.js" charset="utf-8"></script>
<script src="${ctx}/resources/ace/ajaxfileupload.js" charset="utf-8"></script>
<script type="text/javascript">

    $(function () {
        initIconSelect();
        initBirthday();
        initButtonClick();
        validateRoleForm();
    });

    /**
     * 初始化图片插件
     */
    function initIconSelect() {
        var file_input = $('#multipartFile');
        file_input.ace_file_input({
            style: 'well',
            no_file: '请选择上传的头像',
            btn_choose: '选择上传的头像',
            btn_change: null,
            allowMime: ["image/jpg", "image/jpeg", "image/png", "image/gif", "image/bmp"],
            allowExt: ["jpeg", "jpg", "png", "gif", "bmp"],
            no_icon: 'ace-icon fa fa-picture-o',
            droppable: true,
            thumbnail: 'large'//large | fit
            ,
            before_change: function (files, dropped) {
                return true;
            },
            before_remove: function () {
                $('#cboxElement').show();
                return true;
            },
            preview_error: function (err) {
                console.log(err);
            }
        }).on('change', function () {
            $('#cboxElement').hide();
        });
    }

    /**
     * 初始化日期插件
     */
    function initBirthday() {
        $("#birthday").datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            language: 'zh-CN',
            todayHighlight: true,
            clearBtn: true,
            immediateUpdates: true,
            clearDate: function () {
                $("#birthday").val('').datepicker('update');
            }
        });
    }

    /**
     *  初始化绑定按钮事件
     */
    function initButtonClick() {
        $("#btnAdd").click(function () {
            if ($(".ace-file-container").data("title") === undefined) {
                $.ajaxFileUpload({
                    //文件上传
                    url: sys.rootPath + '/appUser/imageUpload',
                    fileElementId: 'multipartFile',
                    dataType: 'json',
                    beforeSend: function () {
                        layer.load();
                    },
                    success: function (data, status) {
                        console.log(data);
                        if (data.code === 200) {
                            console.log("succescs")
                            $('#imageUrl').attr("value",data.data.imageUrl);
                            $('#appUserForm').submit();
                            return;
                        }
                        layer.msg(data.message, {
                            icon: 5
                        });
                        return false;
                    },
                    error: function (data, status) {
                        layer.msg("上传出错！", {
                            icon: 5
                        });
                        return false;
                    }
                });
            } else {
                $('#appUserForm').submit();
            }
        });

        $("#btnBack").click(function () {
            movic.common.loadPage('/appUser/listUI.html<c:if test="${!empty appUserEntity}">?page=${page.pageNum }&rows=${page.pageSize }&sidx=${page.orderByColumn }&sord=${page.orderByType }</c:if>');
        });
    }

    /**
     * 初始化表单验证
     */
    function validateRoleForm() {
        $('#appUserForm').validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: false,
            ignore: "",
            rules: {
                uAccountName: {
                    required: true,
                    remote: {
                        param: {
                            url: sys.rootPath + '/appUser/withoutAuth/validateAccountName.html',
                            cache: false
                        },
                        depends: function () {
                            return typeof ($("#appUserId").val()) === "undefined";
                        }
                    }
                },
                uPassword: {
                    required: true,
                    maxlength:18,
                    minlength:6
                },
                uName: {
                    required: true
                },
                uSex: {
                    required: true
                },
                uBirthday: {
                    required: true
                },
                uIcon: {
                    required: true
                }
            },
            messages: {
                uAccountName: {
                    required: "请填写用户账号",
                    remote: "该账号已存在"
                },
                uPassword: {
                    required: "请填写用户密码",
                    minlength: "密码长度应大于6位",
                    maxlength: "密码长度应小于18位"
                },
                uName: "请填写用户昵称",
                uSex: "请选择性别",
                uBirthday: "请填写出生日期",
                uIcon: "请上传头像"
            },
            highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
            },
            success: function (e) {
                $(e).closest('.form-group').removeClass('has-error').addClass('has-success');
                $(e).remove();
            },
            errorPlacement: function (error, element) {
                error.insertAfter(element.parent());
            },
            submitHandler: function (form) {
                var appUserId = $("#appUserId").val();
                var url = "";
                if (appUserId !== undefined) {
                    url = '/appUser/edit.html';
                } else {
                    url = '/appUser/add.html';
                }
                movic.common.commit('appUserForm', url, '/appUser/listUI.html');
            }
        });
    }
</script>
